<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<link rel="stylesheet" href="bootstrap.css" />
		<link rel="stylesheet" href="bootstrap2.css" />
	</head>
	<body>
		<!--框架
		  优点：
		  1.节省开发时间
		  2
		-->
		
		
		
		<diV class="container">
			<!--栅格系统
				1.浮动：floa：left；
				2.百分比
				3.媒体查询。
			-->
			<!--栅格系统的行容器-->
			<div class="row">
				<!---->
				<div class="col-xs-12 col-sm-9 col-md-4">
					移动端吗？
				</div>
				<div class="col-sm-3 col-md-4 hidden-xs">不，是平板</div>
				<div class="col-md-4 hidden-sm">pc啊啊啊</div>
			</div>
			<div class="row">
				<div class="col-xs-3">小3</div>
				<div class="col-xs-3 col-xs-offset-2">小3与前面的隔开两份的距离</div>
				<div class="col-xs-3 col-xs-offset-1">小3</div>
			</div>
		    <div class="row">
		    	<div class="col-xs-3 col-xs-push-9">
		    		<div class="row">
		    			<!---->
		    			<div class="col-xs-3">小小3</div>
		    			<div class="col-xs-3">小小3</div>
		    			<div class="col-xs-3">小小3</div>
		    			<div class="col-xs-3">小小3</div>
		    			
		    		</div>
		    		
		    		小3</div>
		    	<div class="col-xs-9 col-xs-pull-3">小9</div>
		    	
		    </div>
		</diV>
		<div class="container-fluid">响应式容器</div>
		
		<table class="table table-hover">
			<thead>
				<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>01</td>
					<td>三</td>
					<td>18</td>
				</tr>
				<tr>
					<td>02</td>
					<td>四</td>
					<td>18</td>
				</tr>
				<tr>
					<td>03</td>
					<td>五</td>
					<td>18</td>
				</tr>
			</tbody>
		</table>
		<button class="btn btn-danger">别点</button>
	</body>
</html>
